<template>
  <div :style="{height:height,width:width}" class="chart-wrapper">
    <div class="chart-header">
      <Options :title="panelData.title" :panel-id="panelId" :dashboard-id="dashboardId" />
    </div>
    <div :id="panelId" :class="className" :style="{height:'calc(100% - 27px)',width:'100%'}" />
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
import Options from './Options'

export default {
  components: {
    Options
  },
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'MixChart'
    },
    title: {
      type: String,
      default: 'Echarts'
    },
    w: {
      type: Number,
      default: 1
    },
    h: {
      type: Number,
      default: 2
    },
    panelData: {
      type: Object,
      default() {
        return {}
      }
    },
    panelId: {},
    dashboardId: {}
  },
  data() {
    return {
      chart: null,
      width: '100%',
      height: '100%',
      barData: [709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078],
      lineData: [1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298],
      xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      echartJson: {}
    }
  },
  watch: {
    w: {
      deep: true,
      handler(val) {
        this.__resizeHandler()
      }
    },
    h: {
      deep: true,
      handler(val) {
        this.__resizeHandler()
      }
    }
  },
  created() {
    // this.height = (this.h * 100) + 'px'
  },
  mounted() {
    this.initChart()
    this.__resizeHandler()
    // console.log(this.panelData.additionalInfo.echartJson)
  },

  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.panelId))

      // eval(` const a = ${this.panelData.additionalInfo.echartJson}`)
      // eslint-disable-next-line no-eval
      var echartJson = eval('(' + this.panelData.additionalInfo.echartJson + ')')
      console.log(echartJson)

      this.chart.setOption(echartJson)
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-wrapper {
  overflow: hidden;
  background: #344b58;
  border-radius: 2px !important;
}
.chart{
  border-radius: 2px !important;
}
.chart-header{
  height: 27px;
  line-height: 27px;
  text-align: center;
  color: white;
}
</style>
